<template>
    <div>
        <h-section title="JIRA需求" collapse :defaultOpen="!!list.length || !disabled" style="padding-top: 0" ref="relateProduct">
            <custom-table ref="ruleTableRef" class="margin-t-16" size="small" rowKey="id" :pagination="false" :columns="columns" :data-source="list">
                <template #verOrder="{ text, index }">
                    <span class="font-w-b" v-if="text === '合计'">
                        {{ text }}
                    </span>
                    <span v-else>{{ text || index + 1 }}</span>
                </template>
                <template #requireName="{ record }">
                    <router-link :to="{ path: '/productRequire/productDetail', query: { id: record.id } }">
                        {{ record.requireName }}
                    </router-link>
                </template>
                <template #storyPoints="{ record }">
                    <div class="font-w-b" v-if="record.verOrder === '合计'">
                        {{ record.storyPoints }}
                    </div>
                    <div v-else>
                        <a-input-number
                            v-model:value="record.storyPoints"
                            :min="0"
                            :max="10000"
                            :maxlength="5"
                            style="width: 100%"
                            v-if="+detail.pmpProductRequires[0]?.stage <= 8 && !disabled"
                        />
                        <span v-else>
                            {{ record.storyPoints }}
                        </span>
                    </div>
                </template>
                <template #jiraUrl="{ record }">
                    <a @click="jumpTo(record.jiraUrl)" v-if="record.jiraUrl">{{ $filters.jiraUrlFilter(record.jiraUrl) }}</a>
                </template>
                <template #issueStatus="{ record }">
                    <div v-if="record.issueStatus">
                        <a-tag color="blue" v-if="record.issueStatus === '待办'">{{ record.issueStatus }}</a-tag>
                        <a-tag color="orange" v-else-if="record.issueStatus === '进行中'">{{ record.issueStatus }}</a-tag>
                        <a-tag color="green" v-else-if="record.issueStatus === '已完成'">{{ record.issueStatus }}</a-tag>
                        <a-tag color="default" v-else>{{ record.issueStatus }}</a-tag>
                    </div>
                </template>
                <template #requireType="{ record }">
                    {{ $filters.valToNameFilter('requireType', record.requireType) }}
                </template>
                <template #planWorkHours="{ record }">
                    <span :class="[record.verOrder === '合计' ? 'font-w-b' : '']">
                        {{ record.planWorkHours }}
                    </span>
                </template>
            </custom-table>
        </h-section>
        <a-modal title="需求调整原因" centered v-model:visible="visible" :width="800">
            <a-textarea placeholder="请输入需求调整原因限制255个字" showCount :maxlength="255" auto-size v-model:value="changeOpinion" />
            <template #footer>
                <flexbox justify="flex-end" class="btn-group">
                    <a-button type="primary" @click="handleOk">提交</a-button>
                </flexbox>
            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import store from '@/store';
import { message } from 'ant-design-vue';
import { CustomTable } from '@/components';
import { defineComponent, reactive, toRefs, watch, computed } from 'vue';
interface State {
    list: any[];
    selectedRow: any;
    visible: boolean;
    changeOpinion: string;
}
export default defineComponent({
    name: 'RelateJIraIssue',
    components: {
        CustomTable
    },
    props: {
        detail: { type: Object, default: () => ({}) },
        disabled: { type: Boolean, default: false },
        stepStatus: { type: String, default: '' }
    },
    emits: ['success'],
    setup(props, { emit }) {
        const state = reactive<State>({
            list: [],
            selectedRow: {}, //选择行
            visible: false,
            changeOpinion: ''
        });
        const columns = computed(() => {
            let columns: any = [
                {
                    title: '需求名称',
                    dataIndex: 'requireName',
                    width: 300,
                    slots: { customRender: 'requireName' },
                    ellipsis: true
                },
                {
                    title: '关联jira issue',
                    dataIndex: 'jiraUrl',
                    width: 100,
                    slots: { customRender: 'jiraUrl' },
                    ellipsis: true
                },
                {
                    title: 'issue 状态',
                    dataIndex: 'issueStatus',
                    width: 100,
                    slots: { customRender: 'issueStatus' }
                },
                {
                    title: '需求类型',
                    dataIndex: 'requireType',
                    width: 80,
                    slots: { customRender: 'requireType' }
                },
                {
                    title: 'sprint',
                    width: 260,
                    align: 'center',
                    dataIndex: 'jiraSprintName'
                },
                {
                    title: 'SP',
                    width: 100,
                    align: 'center',
                    dataIndex: 'storyPoints',
                    slots: { customRender: 'storyPoints' }
                },
                {
                    title: '预估工时',
                    width: 100,
                    align: 'center',
                    dataIndex: 'planWorkHours',
                    slots: { customRender: 'planWorkHours' }
                },
                {
                    title: '实际耗时',
                    width: 100,
                    align: 'center',
                    dataIndex: 'effectiveProductionTime',
                    slots: { customRender: 'effectiveProductionTime' }
                }
            ];
            if (!props.disabled) {
                columns = [
                    ...columns,
                    {
                        title: '操作',
                        dataIndex: 'action',
                        width: 150,
                        slots: { customRender: 'action' }
                    }
                ];
            }
            return columns;
        });
        const handleOk = async () => {
            if (state.visible === true && !state.changeOpinion) {
                message.error('调整原因不能为空');
                return;
            }
            state.visible = false;
            console.log('selectedRow', state.selectedRow);
            const { processStatus } = props.detail;
            const { empId, name } = store.getters.userInfo.employeeDTO;
            const query = [
                {
                    issueId: state.selectedRow.id,
                    component: state.selectedRow.component,
                    projectKey: state.selectedRow.projectKey,
                    operation: 'delete',
                    versionId: props.detail.id,
                    catalogCode: props.detail.pmpProductDetailDTO.catalogCode,
                    record: ['3', '4', '5', '6', '7', '8', '9'].includes(processStatus), // 789(验收，上线审核和上线流程)需要记录需求列表操作
                    empId,
                    empName: name,
                    processStatus,
                    taskNode: props.stepStatus,
                    changeOpinion: state.changeOpinion
                }
            ];
            const { success, errorMsg } = await api.jiraIssueModel.batchDeal(query);
            if (success) {
                message.success('移除成功');
                emit('success');
            } else {
                message.error(errorMsg);
            }
        };
        const handleDelete = (row) => {
            state.selectedRow = row;
            if (props.detail.pmpJiraIssueDTOs.length === 1 && props.stepStatus === 'requireOnline') {
                message.warn('这是该版本唯一的需求，不可移除');
                return;
            }
            if (+props.detail.processStatus >= 3) {
                state.visible = true;
                state.changeOpinion = '';
            } else {
                handleOk();
            }
        };
        const jumpTo = (link) => {
            window.open(link, '_blank');
        };
        const init = () => {
            state.list = props.detail.pmpProductRequires || [];
        };
        init();
        watch(() => props.detail, init, { deep: true });
        return {
            columns,
            ...toRefs(state),
            handleDelete,
            handleOk,
            jumpTo
        };
    }
});
</script>

<style scoped></style>
